/*
 *  PAGE: BLOG
 *  Latest posts and category functions
 *
 */

/* Style each blog post item according to its category colour */
@each $category, $colour in $blog-categories {
  .blog-label-#{$category} {

    /* Card items on /blog */
    &.card-item {
      @include card-item-category-colours($colour);
    }

    &.page-post {
      .content-container {
        .rule,
        .content a,
        .author .link a,
        .single-column hr {
          border-color: $colour;
        }

        .single-column hr {
          background: $colour;
        }

        .category-tag {
          background-color: $colour;
        }
      }
    }

    .quote-block {
      .quote-mark {
        svg {
          fill: $colour;
        }
      }
      .quote {
        color: $colour;
      }
      .source {
        color: $darkGrey;
      }
    }
  }
}

.page-blog {
  background-color: $lightGrey;

  .blog-post-list {
    margin-top: -$hero-offsetSize-small;

    @media screen and (min-width: $bp-tablet) {
      margin-top: -$hero-offsetSize;
    }
  }

  .hero {
    @include page-background-colour(blog);
    .blog-controls {
      position: absolute;
      bottom: calc(#{$hero-offsetSize-small} + 60px);

      @media screen and (min-width: $bp-tablet) {
        bottom: calc(#{$hero-offsetSize} + 60px);
      }
    }
  }

  .hero {
    width: 100%;

    .rimage {
      top: 42%;
      max-width: 450px;
      opacity: .4;
    }
  }

  .blog-post-list {
    opacity: 1;
    flex-direction: column;
    transform: translateY(0px);
    transition: opacity .2s linear, transform .32s ease-in-out;
  }

  .message {
    color: #fff;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
    background: $blu;
    margin-top: 0;
    text-align: center;
    padding-bottom: 70px;
    height: 170px;

    h3 {
      display: inline-block;
      vertical-align: top;
      width: auto;
    }

    .loading-icon {
      display: inline-block;
      margin-left: 20px;
    }
  }

  &.empty {
    .blog-post-list {
      max-width: none;
    }
    .load-more-button {
      display: none;
    }
  }

  .blog-controls .blog-filter {
    .selected:after {
      display: block;
    }
    .loading-icon {
      display: none;
    }
  }

  &.loading {
    .blog-post-list {
      opacity: 0;
      transform: translateY(100px);
      transition-delay: .62s, .5s;
    }

    .blog-controls .blog-filter {
      .loading-icon {
        display: block;
      }
    }
  }

  &.empty {
    .blog-post-list {
      padding: 0;
    }
  }


  @media screen and (min-width: $bp-medium) {

    &.categorised {
      .down-indicator {
        display: none;
      }
      .blog-post-list {
        .message {
          margin-top: 30px;
          padding-bottom: 0;
        }
        .message,
        .blog-post-list-item {
          position: relative;
        }
      }
    }

    .load-more {
      margin: 0;

      .load {
        padding: 0 150px;
        width: auto;
      }
    }
  }
}
